<template>
  <div>
    <el-popconfirm
      :title="config.title"
      :offset="200"
      :icon="config.icon"
      :icon-color="config.iconColor"
      placement="top"
      :confirm-button-text="config.confirmButtonText"
      :cancel-button-text="config.cancelButtonText"
      @confirm="config.confirm()"
      style="width: 500px"
    >
      <template #reference>
        <span>
          {{ name }}
        </span>
      </template>

      <!-- <template v-slot:reference>

      <slot name="reference">
          {{ name }}
      </slot>

      </template> -->

      <!-- <template v-slot:reference="scope">
      <slot :row="scope.row" name="reference">
        <span>dd</span>
      </slot> -->
      <!-- <slot name="reference" :row="scope.row"> -->
      <!-- <span>
        {{ name }}
        </span> -->
      <!-- <el-button>Delete</el-button> -->
      <!-- <slot name="reference">11</slot> -->

      <!-- </slot> -->
      <!-- </template> -->
    </el-popconfirm>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, defineProps } from "vue"
import { IPopConfirmConfig } from "../index"

const props = defineProps({
  popConfirmConfig: {
    type: Object,
    required: true
  },
  name: {
    type: String,
    default: ""
  }
})

const visible = ref(false)
const config = reactive(
  computed(() => ({ ...props.popConfirmConfig } as IPopConfirmConfig))
)
</script>

<style>
.el-popover.el-popper {
  padding: 3vw 5vw;
}
.el-popconfirm__main {
  justify-content: center;
}
.el-popconfirm__action {
  margin-top: 2vw;
}
</style>
